<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/29
  Time: 9:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" href="../layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script src="/js/echarts.min.js"></script>
    <script src="/js/china.js"></script>
    <script type="text/javascript">
        layui.use(['layer', 'form',"table","jquery","upload"], function(){
            var layer = layui.layer
            var form = layui.form;
            var table=layui.table
            var $=layui.jquery
            var upload=layui.upload
            table.render({
                elem:"#user"
                ,url:"${pageContext.request.contextPath}/selectUserByPage"
                ,toolbar:"#toolbarDemo"
                ,page:true
                ,cols:[[
                    {field:"id",title:"编号",align:"center"}
                    ,{field:"telphone",title:"电话",align:"center"}
                    ,{field:"nickname",title:"昵称",align:"center"}
                    ,{field:"name",title:"用户名",align:"center"}
                    ,{field:"sex",title:"年龄",align:"center"}
                    ,{field:"autograph",title:"个性签名",align:"center"}
                    ,{field:"province",title:"省",align:"center"}
                    ,{field:"city",title:"城市",align:"center"}
                    ,{field:"status",title:"状态",align:"center"}
                    ,{field:"createDate",title:"创建时间",align:"center"}
                    ,{title:"操作",templet:"#caoZuoTemplet",align:"center"}
                ]]
            })


            table.on('toolbar(userFilter)', function(obj){
                if (obj.event=="update") {
                    //alert("ooo")
                   // $("#addform")[0].reset()
                    $.get("${pageContext.request.contextPath}/getUserSex",function (data) {
                        // 基于准备好的dom，初始化echarts实例
                        console.log(data)
                        var myChart = echarts.init(document.getElementById('main'));
                        // 显示标题，图例和空的坐标轴
                        myChart.setOption({
                            backgroundColor: '#2c343c',

                            title: {
                                text: '用户性别统计',
                                left: 'center',
                                top: 20,
                                textStyle: {
                                    color: '#ccc'
                                }
                            },

                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b} : {c} ({d}%)'
                            },

                            visualMap: {
                                show: false,
                                min: 80,
                                max: 600,
                                inRange: {
                                    //colorLightness: [0, 1]
                                }
                            },
                            series: [
                                {
                                    name: '用户性别统计',
                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '50%'],
                                    data: [

                                    ].sort(function (a, b) { return a.value - b.value; }),
                                    roseType: 'radius',
                                    label: {
                                        color: 'rgba(255, 255, 255, 0.3)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        },
                                        smooth: 0.2,
                                        length: 10,
                                        length2: 20
                                    },
                                    itemStyle: {
                                        color: '#c23531',
                                        shadowBlur: 200,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    },

                                    animationType: 'scale',
                                    animationEasing: 'elasticOut',
                                    animationDelay: function (idx) {
                                        return Math.random() * 200;
                                    }
                                }
                            ]
                        });

                        // 填入数据
                        myChart.setOption({
                            series: [{
                                // 根据名字对应到相应的系列
                                data: data
                            }]
                        });

                        /*// 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);*/

                        //弹框
                        layer.open({
                            type: 1,
                            content: $('#sexForm'),
                            area:["500px","400px"]

                        })

                    })
                    


                }else if (obj.event=="map"){

                    $.get("${pageContext.request.contextPath}/getUserProvince",function (data) {
                        // 基于准备好的dom，初始化echarts实例
                        console.log(data)
                        var myChart = echarts.init(document.getElementById('map'));
                        // 显示标题，图例和空的坐标轴
                        myChart.setOption({
                            title: {
                                text: '用户省份分布'
                            },
                            tooltip: {},
                            legend: {
                                data:['用户省份分布']
                            },

                            series: [{
                                type:"map",
                                map:"china",
                                data: [{}]
                            }]
                        });

                        // 填入数据
                        myChart.setOption({
                            series: [{
                                // 根据名字对应到相应的系列
                                data: data
                            }]
                        });

                        /*// 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);*/

                        //弹框
                        layer.open({
                            type: 1,
                            content: $('#provinceForm'),
                            area:["500px","400px"]

                        })

                    })
                }
                /*监听添加工具栏======end*/

            });
            
            
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '${pageContext.request.contextPath}/daoru' //上传接口
                ,accept :"file"
                ,exts:"xls"
                ,done: function(res){
                    //上传完毕回调
                    console.log(res.isdaoru)
                }
                ,error: function(){
                    //请求异常回调
                }
            });

            //监听行工具栏
            table.on('tool(userFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if(layEvent === 'edit'){ //删除
                    layer.confirm('真的冻结吗', function(index){

                        layer.close(index);
                        //向服务端发送删除指令
                        $.ajax({
                            url:"${pageContext.request.contextPath}/updateUserStatus",
                            data:{"id":data.id}
                            ,success:function (data) {
                                var msg="修改失败"
                                if (data.isUpdate) {
                                    msg="修改成功"
                                    layer.closeAll()
                                    table.reload('user');
                                }
                                layer.msg(msg)
                            }
                        })
                    });
                }
            });
            /*//监听行工具栏=========end*/
        });

    </script>
    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="caoZuoTemplet">
        <a class="layui-btn layui-btn-xs" lay-event="edit">冻结</a>
    </script>
    <!--/*自定义头工具栏模板*/-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            <a class="layui-btn layui-btn-radius layui-btn-normal" href="${pageContext.request.contextPath}/daochu">导出Excel</a>
            <a class="layui-btn layui-btn-radius layui-btn-normal" href="${pageContext.request.contextPath}/download/user模板.xls">下载模板</a>
            <button type="button" class="layui-btn" id="test1">
                <i class="layui-icon">&#xe67c;</i>导入Excel
            </button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="update">统计用户性别饼状图</button>
        </div>
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="map">统计用户省份分布图</button>
        </div>
    </script>
</head>
<body>
<table id="user" lay-filter="userFilter"></table>
<%--//饼状图--%>
<form style="display: none" id="sexForm">
    <div id="main" style="width: 500px;height:400px;"></div>
</form>
<%--地图--%>
<form style="display: none" id="provinceForm">
    <div id="map" style="width: 500px;height:400px;"></div>
</form>
</body>
</html>